<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--预加载-->
		<style type="text/css">
			.loading{
				font-size: 30px;
			}
			.box li{
				width:350px;
				height: 40px;
				line-height: 40px;
				list-style: none;
				text-align: center;
				box-shadow: 0 0 5px skyblue;
				margin-bottom: 10px;
				cursor: pointer;
			}
			.box li:hover{
				box-shadow:0 0 5px pink;
			}
		</style>
		<div class="loading">
			我是进度条
			<span>0%</span>
		</div>
		<ul class="box">
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			function ajax({method="GET",url}){
				return new Promise(function(resolve,reject){
					var xhr = new XMLHttpRequest();
					xhr.open(method,url);
					xhr.addEventListener("readystatechange",()=>{
						if(xhr.readyState == 4 ){
							if( xhr.status == 200){
								resolve(JSON.parse(xhr.response));
							}else{
								reject("ajax失败");
							}
						}
					})
					xhr.send();
				})
			}
			
			
			function loadAudio(src){
				let aud = document.createElement("audio");
				return new Promise((resolve,reject)=>{
					aud.addEventListener("canplay",()=>{
						resolve();
					});
					aud.src = src;
					
					setTimeout(()=>{
						reject(src+"加载超时")
					},5000);
					
				})
			};
			
			function getData(){
				return new Promise((resolve,reject)=>{
					let data = sessionStorage.getItem("music");
					if(data){
						resolve(JSON.parse(data))
					}else{
						ajax({url:"./music.json"}).then((res)=>{
							console.log(res)
							sessionStorage.setItem("music",JSON.stringify(res));
							resolve(res)
						});
					};
				});
			};
			
			
			
			
			// 页面内容初始化
			getData({url:"./music.json"}).then(res=>{
//				处理数据
				res = res.sort(function(){
					return Math.random()-0.5;
				}).slice(0,30);
				
//				预加载
				let loaded = 0;
				let loadSpan = document.querySelector(".loading span");
				let proList = [];
				res.forEach((el,index)=>{
					let newPro = loadAudio(el.audio);
					newPro.then(e=>{
						loaded++;
						let progress = (loaded/30*100).toFixed(0)+"%";
						loadSpan.innerText = progress;
					});
					proList.push(newPro)
				});
				let succesControl = Promise.all(proList);
				succesControl.then((e)=>{
					console.log("全部ok！")
				},err=>{
					alert("资源加载错误，请刷新页面重载！")
					console.log("someone fail",err)
				})
				return res;
			}).then(res=>{
				this.res = res;
				let grade = 0;
				let index = 0;
				let lis = document.querySelectorAll('.box li');
				function render(index){
					lis.forEach((e,i)=>{
						e.innerText = res[index].item[i];
					});
				}
//				渲染第一条
				render(index);
//				监听渲染下一首
				lis.forEach((e,i)=>{
					e.addEventListener("click",()=>{
						console.log(i)
						if(index == 29){
							alert("游戏结束,总分:"+grade)
							return
						}
						if(i == res[index].answer){
							console.log("答案正确+1分");
							grade++;
						}
						index++;
						render(index);
					});
				});
			});
		</script>
	</body>
</html>
